<template>
  <div class="big-page main-page">
    <page-header menu="home"></page-header>
    <div class="main-layout">
      <div class="column-1">
        <div class="column-row">
          <main-chart :chart-type="'bar'" size="small" :data="chart1" v-if="chart1.ok"></main-chart>
        </div>
        <div class="column-row">
          <bar-chart :chart-type="'bar'" size="small" :data="chart4"></bar-chart>
        </div>
        <div class="column-row">
          <x-bar-chart :chart-type="'bar'" size="small" :data="chart2"></x-bar-chart>
        </div>
      </div>
      <div class="column-2">
        <div class="column-row-2">
          <common-circle size="large" ></common-circle>
        </div>
        <div class="column-row-1">
          <main-table size="small" :data="table"></main-table>
        </div>
      </div>
      <div class="column-1">
        <div class="column-row">
          <ring-chart :chart-type="'pie'" size="small" :data="chart5"></ring-chart>
        </div>
        <div class="column-row">
          <cube-chart :chart-type="'bar'" size="small" :data="chart6"></cube-chart>
        </div>
        <div class="column-row">
          <common-chart :chart-type="'bar'" size="small" :data="chart3"></common-chart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from '@/views/pages/components/PageHeader'
import MainChart from '@/views/pages/components/MainChart'
import CommonCircle from '@/views/pages/components/CommonCircle'
import MainTable from '@/views/pages/components/MainTable'
import BarChart from '@/views/pages/components/BarChart'
import XBarChart from '@/views/pages/components/XBarChart'
import CubeChart from '@/views/pages/components/CubeChart'
import RingChart from '@/views/pages/components/RingChart'
import CommonChart from '@/views/pages/components/CommonChart'
import portal from '@/api/portal'
export default {
  name: 'HomePage',
  data () {
    return {
      chart1: {
        ok: false,
        name: '当日班车预约',
        routeName: 'SmartLogistics',
        xAxis: [],
        seriesData: []
      },
      chart2: {
        name: '智慧餐饮',
        routeName: 'SmartCatering',
        xAxis: [],
        series: []
      },
      chart3: {
        name: '能源管理',
        routeName: 'EnergyManagement',
        xAxis: [],
        series: []
      },
      chart4: {
        name: '校园规划',
        routeName: 'CampusPlanning',
        xAxis: [],
        series: []
      },
      chart5: {
        name: '当日报修比例',
        routeName: 'SmartBuilding',
        xAxis: [],
        series: []
      },
      chart6: {
        name: '人员信息',
        routeName: 'PersonInformation',
        xAxis: [],
        series: []
      },
      table: {
        name: '班车预警',
        data: [
          { count: 1, time: '2024-05-02' }
        ]
      }
    }
  },
  components: {
    PageHeader,
    MainChart,
    BarChart,
    CubeChart,
    CommonCircle,
    XBarChart,
    RingChart,
    MainTable,
    CommonChart
  },
  created () {
    this.getBusTodayChart()
    this.getChart2()
    this.getChart3()
    this.getChart4()
    this.getChart5()
    this.getChart6()
  },
  mounted () {
  },
  methods: {
    async getBusTodayChart () {
      const res = await portal.getBusTodayChart()
      if (res.data) {
        const data = res.data
        this.chart1.top = '20%'
        this.chart1.grid = [{
          left: '12%',
          top: '25%',
          bottom: '16%'
        }]
        this.chart1.yAxis = [{
          name: '单位：人数',
          type: 'value',
          max: 800,
          axisLabel: {
            formatter: '{value}',
            color: '#e2e9ff'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#333'
            }
          }
        }]
        this.chart1.xAxis = [
          { data: ['教师', '学生', '候补'], axisLabel: { show: true, color: '#fff', fontSize: 10 } }
        ]
        this.chart1.series = [{
          type: 'bar',
          barWidth: '40%',
          color: '#fff',
          label: {
            show: true,
            position: 'top',
            textStyle: { color: '#fff', fontStyle: 'oblique', fontSize: 12 }
          },
          data: [data.teaCount, data.stuCount, data.hbCount]
        }]
        this.chart1.ok = true
      }
    },
    async getChart2 () {
      this.chart2.top = '10%'
      this.chart2.yAxis = [{
        type: 'value',
        max: 200,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff'
          }
        }
      }]
      this.chart2.xAxis = [
        { data: ['鸡蛋牛肉面', '黑椒牛肉面', '土豆肥牛', '爆浆排骨肉盖浇饭', '红烧茄子盖浇饭'] }
      ]
      this.chart2.series = [{
        type: 'bar',
        barWidth: '20%',
        color: '#02BBFF',
        label: {
          show: true,
          position: 'right',
          textStyle: { color: '#fff', fontStyle: 'oblique' }
        },
        data: [500, 480, 460, 350, 300, 250, 230]
      }]
    },
    async getChart3 () {
      const params = {
        type: 2
      }
      const res = await portal.getChartEnergyCapacity(params)
      if (res.data) {
        const records = res.data
        const xAxisData = []
        records.forEach((e, index) => {
          if (!index) {
            for (const c in e.data) {
              if (c.indexOf('20') === 0) {
                xAxisData.push(c)
              }
            }
          }
        })
        xAxisData.sort()
        const series = []
        records.forEach(item => {
          series.push(
            {
              type: 'bar',
              name: item.xq,
              barWidth: '18%',
              label: {
                show: true,
                position: 'top',
                textStyle: { color: '#fff', fontSize: 8, fontStyle: 'oblique' }
              },
              data: xAxisData.map(key => item.data[key])
            }
          )
        })
        // this.chart3.title = '用电量同比'
        this.chart3.yAxis = [{
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.2)'
            }
          },
          axisLine: {
            show: false
          },
          axisLabel: {

            fontWeight: 10,
            fontsize: 5,
            color: 'rgba(255,255,255,0.3)'
          }
        }]
        this.chart3.top = '15%'
        this.chart3.series = series
        this.chart3.xAxis = [
          { data: xAxisData, axisLabel: { show: true, color: '#fff', fontSize: 12 } }
        ]
      }
    },
    async getChart5 () {
      const params = {
      }
      const res = await portal.getBxTodayXq(params)
      if (res.data) {
        const data = res.data
        this.chart5.legend = [
          { data: ['中关村总数  ' + data.zgc_total, '良乡总数  ' + data.lx_total], orient: 'vertical', x: 'left', top: 'center', left: '60%', bottom: '0%', textStyle: { color: '#fff', fontSize: 12 }, itemWidth: 8, itemHeight: 8, itemGap: 16 }
        ]
        this.chart5.series = [{
          type: 'pie',
          label: {
            orient: 'horizontal',
            right: 0,
            y: '10%',
            show: true,
            position: 'left',
            textStyle: { color: '#fff', fontSize: 50, fontStyle: 'oblique' }
          },
          data: [{ value: data.zgc_total, name: '中关村总数  ' + data.zgc_total, itemStyle: { color: '#FDB225' } }, { value: data.lx_total, name: '良乡总数  ' + data.lx_total, itemStyle: { color: '#75fff5' } }]
        }]
      }
    },
    async getChart4 () {
      this.chart4.top = '20%'
      this.chart4.grid = [{
        left: '12%',
        top: '25%',
        bottom: '16%'
      }]
      this.chart4.yAxis = [{
        type: 'value',
        name: '万平方米',
        max: 200,
        axisLabel: {
          formatter: '{value}',
          color: '#fff'
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#d6d8d9',
            width: 1,
            type: 'solid'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(85,111,166,0.89)'
          }
        }
      }]
      this.chart4.xAxis = [
        { data: ['中关村', '良乡校区', '西山试验区'], axisLabel: { show: true, color: '#fff', fontSize: 10, bottom: '40%' } }
      ]
      this.chart4.series = [{
        type: 'bar',
        barWidth: '25%',
        color: '#02BBFF',
        label: {
          show: true,
          position: 'top',
          textStyle: { color: '#fff', fontSize: 12, fontStyle: 'oblique' }
        },
        axisLabel: {
          interval: 0,
          rotate: 0
        },
        data: [114.34, 69.77, 5.54]
      }]
    },
    async getChart6 () {
      this.chart6.yAxis = [{
        type: 'value',
        axisLabel: {
          formatter: '{value}',
          color: '#fff'
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#32346c'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#32346c '
          }
        }
      }]
      this.chart6.top = '15%'
      this.chart6.xAxis = [
        { data: ['新食堂', '京工餐厅', '3号教学楼', '8号教学楼', '中心教学楼', '研究生教学楼', '信息科学实验楼', '宇航楼'], axisLabel: { show: true, color: '#fff', fontSize: 10, interval: 0, rotate: -25 } }
      ]
      this.chart6.series = [{
        type: 'bar',
        barWidth: '40%',
        color: '#02BBFF',
        label: {
          show: true,
          position: 'top',
          textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' },
          opacity: 0.5
        },
        data: [4788, 2252, 2185, 1918, 1789, 1696, 1192, 1089]
      }]
    }
  }
}
</script>

<style scoped lang="scss">
.main-page {
  // background: url(../../assets/images/new/bg.png) no-repeat center !important;
  background-size: cover;
}

</style>
